import React from 'react';
import {Button, DatePicker, Input, Layout, Select,Table} from "antd";
import WithMon from "../MoneyManagement/with-mon";
// import {SearchOutlined } from '@ant-design/icons';
import '../MoneyManagement/Voucher.css'
import axios from "../../../util/http";
import * as url from "../../../util/api";
const { Option } = Select;
const {Search} = Input
const { RangePicker } = DatePicker;

function handleChange(value) {
    console.log(`selected ${value}`);
}
//订单收款统计
class OrderCollection extends React.Component {
    constructor(props){
        super(props)
        this.state={
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            getData:'',
            nextData:'',
        }
    }
    componentDidMount() {
        axios({
            url:url.OrderCollection,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.dealersName===value
            })
            this.setState({
                getData:newData
            })
        }

    }


    start = () => {
        this.setState({ loading: true });
        // ajax request after empty completing
        setTimeout(() => {
            this.setState({
                selectedRowKeys: [],
                loading: false,
            });
        }, 1000);
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    render() {
        const columns = [
            {
                title: '下单时间',
                dataIndex: 'orderTime',
            },
            {
                title: '经销商名称',
                dataIndex: 'dealersName',
            },
            {
                title: '单号',
                dataIndex: 'orderNum',
            },
            {
                title: '订货金额',
                dataIndex: 'orderMoney',
            },
            {
                title: '应收金额',
                dataIndex: 'accountsMoney',
            },
            {
                title: '已确认金额',
                dataIndex: 'sureMoney',
            },
            {
                title: '待确认金额',
                dataIndex: 'nosureMoney',
            },
            {
                title: '待收金额',
                dataIndex: 'daiMoney',
            },
        ];

        const {  selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        // const hasSelected = selectedRowKeys.length > 0;
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{marginLeft:'10px',width:140,marginRight:'20px'}} defaultValue="全部付款状态"  onChange={handleChange}>
                                <Option value="全部付款状态">全部付款状态</Option>
                                <Option value="未全部付款">未全部付款</Option>
                                <Option value="已全部付款">已全部付款</Option>
                            </Select>
                            <RangePicker style={{width:400}}/>
                            <Search
                                placeholder="请输入支付流水号/单号/经销商名称"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />   </div>
                        <div className='topRight'>
                            <Button type="primary">导出</Button>
                        </div>
                    </div>
                    <div className='accountSum'>
                        <div className='accountLeft'>
                            <div className='moneySum'>0：00</div>
                            <div className='titleM'>应收金额总计</div>

                        </div>
                        <div className='accountCenter'>
                            <div className='moneySum'>0：00</div>
                            <div className='titleM'>已收金额总计</div>
                           <div className='titleB'>
                               <div style={{marginTop:'10px'}}>已确认收款：0.00</div>
                               <div style={{marginTop:'10px'}}>待确认收款：0.00</div>
                           </div>
                        </div>
                        <div className='accountRight'>
                            <div className='moneySum'>0：00</div>
                            <div className='titleM'>待收金额总计</div>

                        </div>
                    </div>
                </Layout>
                <div>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.getData} />
                </div>

            </div>
        );
    }
}

export default WithMon('订单收款统计')(OrderCollection);